import React, {useState} from 'react';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {useNavigation, CommonActions} from '@react-navigation/native';
import {Box, Button, Flex, Icon, Input, Text} from 'native-base';
import SvgIcons from '@/assets/svg';
const ResetPassword = () => {
  const primaryColor = global.primaryColor;
  const [showPassword, setShowPassword] = useState(false);
  const handleState = () => {
    setShowPassword(showState => {
      return !showState;
    });
  };
  const login = () => {
    navigation.dispatch(
      CommonActions.reset({
        index: 0,
        routes: [{name: 'Tbabar'}],
      }),
    );
  };
  const insets = useSafeAreaInsets();
  const navigation = useNavigation();
  const goBack = () => {
    // 通过 navigation 返回上一页
    navigation.goBack();
  };
  return (
    <Box bg="white" style={{paddingTop: insets.top}} w="full" h="full">
      <Box w="full">
        <Flex w="full" direction="row" alignItems="center" justifyContent="space-between">
          <Button onPress={goBack} bg="white">
            <SvgIcons.ChevronLeftIcon width={24} height={24} color={primaryColor} />
          </Button>
          <Text color="primary.600">重置密码</Text>
          <Box w="10" h="10" />
        </Flex>
      </Box>
      <Box mt="2/5" pl="8" pr="8">
        <Box>
          <Input h={10} InputLeftElement={<Icon as={<SvgIcons.PhoneIcon width={24} height={24} />} pl="8" color="muted.400" />} placeholder="手机号码"></Input>
          <Input
            mt="6"
            h={10}
            InputLeftElement={<Icon as={<SvgIcons.MessageIcon width={24} height={24} />} pl="8" color="muted.400" />}
            placeholder="短信验证码"
            InputRightElement={
              <Text pr="3" color="muted.400">
                发送验证码
              </Text>
            }></Input>
          <Input
            mt="6"
            h={10}
            type={showPassword ? 'text' : 'password'}
            InputLeftElement={<Icon as={<SvgIcons.LockIcon width={24} height={24} />} pl="8" color="muted.400" />}
            placeholder="登录密码"
            InputRightElement={
              <Icon
                as={showPassword ? <SvgIcons.EyeIcon width={24} height={24} onPress={handleState} /> : <SvgIcons.EyeOffIcon onPress={handleState} width={24} height={24} />}
                pr="8"
                color="muted.400"
              />
            }></Input>
        </Box>
        <Box mt="12">
          <Button size="md" h="16" variant="solid" bg="primary.600" isDisabled={false} isFocusVisible={false} onPress={login} borderRadius="full">
            确认
          </Button>
        </Box>
      </Box>
    </Box>
  );
};

export default ResetPassword;
